<template>
    <div style="background: #fff;">
        <!-- 轮播图 -->
        <div class="swipeBox">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(val, ind) in swipeList" :key="ind">
                    <img :src="'images/swipe/' + val.rotationName">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 首页菜单 -->
        <div class="gridMenu">
            <van-grid :column-num="5" :border="false">
                <van-grid-item v-for="item in menuList" :key="item.menuId" :icon="'images/menuIcon/' + item.menuPicture" :text="item.menuName" @click="handleClick(item.menuUrl, 'log', item)" />
                <van-grid-item icon="images/menuIcon/more.svg" @click="handleClick('/apply/applyManage')" text="更多" />
            </van-grid>
        </div>
        <!-- 通知 -->
        <div class="notice">
            <div class="con">
                <div class="left">
                    <img src="images/home/vector.svg">
                    <span>通知公告</span>
                </div>
                <div class="right">
                    <van-notice-bar color="#4D6181" background="transparent" @click="handleClick('/sysNotice/list')">
                        <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
                            <van-swipe-item v-for="item in noticeList" :key="item.mailId">{{item.title}}</van-swipe-item>
                        </van-swipe>
                    </van-notice-bar>
                </div>
            </div>
        </div>
        <!-- 访客预约、智慧餐饮、申请组件动态展示 -->
        <component v-for="item in compList" :key="item" :is="item" @sendAccesslog="saveBusiAccesslogData"></component>
        <!-- 常见问题 -->
        <div class="problem">
            <div class="title">
                <div class="left">
                    <img src="images/home/problem.svg">
                    <b>常见问题</b>
                </div>
                <div class="right" @click="handleClick('/problem/list')">更多
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="content">
                <ul>
                    <li v-for="item in problemList" :key="item.guideId" @click="handleClick('/problem/detail?guideId=' + item.guideId)">
                        <b>·</b>{{item.guideTitle}}
                    </li>
                    <van-empty v-if="!loading && !problemList.length" class="custom-image" :image="require('../../../../assets/images/empty.png')" description="暂无数据" />
                </ul>
            </div>
        </div>
        <!-- 版本 -->
        <div class="version">- {{versionInfo}} -</div>
        <fullLoading v-if="spinLoading"></fullLoading>
    </div>
</template>

<script>
    import { queryRotationApp, queryAppHomeMenu, queryBlockMenuApp, queryConfig, queryStaffMenu, saveBusiAccesslog } from '@/api/platframe/mainFrame/home';
    import { queryMyNotices } from '@/api/platframe/sysNotice';
    import { queryAssistGuide } from '@/api/platframe/problem';
    import application from './application.vue';
    import visitor from './visitor.vue';
    import restaurant from './restaurant.vue';
    import store from '../../../../store';
    export default {
        components: { application, visitor, restaurant },
        data () {
            return {
                spinLoading: false,
                loading: false,
                versionInfo: '', // 版本信息
                swipeList: [],
                menuList: [],
                compList: [],
                problemList: [],
                noticeList: [],
                leafMenuList: [], // 叶子菜单
                allMenuList: []
            }
        },
        created () {
            this.queryBlockMenuAppData();
            this.queryRotationAppData();
            this.queryAppHomeMenuData();
            this.queryMyNoticesData();
            this.queryAssistGuideData();
            this.queryConfigData();
            this.queryStaffMenuData();
        },
        methods: {
            // 设置页面滚动条位置
            setPageScrollY () {
                let scrollY = this.$store.state.scrollY;
                if (scrollY) {
                    this.$nextTick(() => {
                        document.querySelector(".main").scrollTop = scrollY;
                    })
                }
            },
            // 点击进入应用
            handleClick (path, type, item) {
                if (item && item.menuName === '智慧出行') {
                    window.location.href = 'cheliang/index.html';
                    return
                }
                if (!path) return;
                this.$router.push({ path });
                if (type === 'log') {
                    this.saveBusiAccesslogData(path);
                }
            },
            // 轮播图
            queryRotationAppData () {
                queryRotationApp().then(res => {
                    if (res.code === 1000 && res.data) {
                        this.swipeList = res.data;
                    }
                })
            },
            // 首页应用
            queryAppHomeMenuData () {
                queryAppHomeMenu().then(res => {
                    if (res.code === 1000 && res.data && res.data.length) {
                        this.menuList = res.data;
                    }
                })
            },
            // 查询系统公告
            queryMyNoticesData () {
                let params = {
                    msgType: "101",
                    pageNum: 1,
                    pageSize: 3
                }
                queryMyNotices(params).then(res => {
                    if (res && res.code === 1000 && res.data) {
                        this.noticeList = res.data.records;
                    }
                })
            },
            // 块展示
            queryBlockMenuAppData () {
                let obj = {
                    "访客": "visitor",
                    "申请": "application",
                    "餐饮": "restaurant"
                }
                this.spinLoading = true;
                queryBlockMenuApp().then(res => {
                    this.spinLoading = false;
                    if (res.code === 1000 && res.data) {
                        res.data.forEach(item => {
                            if (item.blockDisplay === '1') {
                                this.compList.push(obj[item.blockName]);
                            }
                        })
                    }
                    this.setPageScrollY();
                }).catch(() => {
                    this.spinLoading = false;
                })
            },
            // 查询常见问题
            queryAssistGuideData () {
                let params = {
                    guideType: "1",
                    pageNum: 1,
                    pageSize: 5
                }
                this.loading = true;
                queryAssistGuide(params).then(res => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.problemList = res.data.records;
                    }
                }).catch(() => {
                    this.loading = false;
                })
            },
            // 获取版本信息
            queryConfigData () {
                queryConfig().then(res => {
                    if (res.code === 1000 && res.data) {
                        this.versionInfo = (res.data.SYS_APP_NAME || '') + " " + (res.data.SYS_APP_VERSION || '');
                    }
                })
            },
            // 查询用户菜单
            queryStaffMenuData () {
                if (sessionStorage.getItem('menuList')) {
                    let menuList = JSON.parse(sessionStorage.getItem('menuList'));
                    this.leafMenuList = this.handleFlat(menuList, '2');
                    this.allMenuList = menuList;
                } else {
                    queryStaffMenu().then(res => {
                        if (res.code === 1000 && res.data && res.data.length) {
                            sessionStorage.setItem('menuList', JSON.stringify(res.data));
                            this.leafMenuList = this.handleFlat(res.data, '2');
                            this.allMenuList = res.data;
                        }
                    })
                }
            },
            // 扁平化处理
            handleFlat (data, type = '') {
                let arr = [];
                data.forEach(item => {
                    if (type === '2') {
                        arr.push(...item.children);
                    } else {
                        arr.push(item);
                        arr.push(...item.children);
                    }
                })
                return arr;
            },
            // 记录菜单访问日志
            saveBusiAccesslogData (path) {
                let arr = this.leafMenuList.filter(item => item.menuUrl === path);
                if (arr.length) {
                    let fmodule = '';
                    let item = arr[0];
                    let _arr = this.allMenuList.filter(val => val.menuId === item.pmenuId);
                    if (_arr.length) {
                        fmodule = _arr[0].menuName;
                    }
                    let params = {
                        functionId: item.menuId,
                        functionName: item.menuName,
                        url: path,
                        fmodule,
                        smodule: "",
                    };
                    saveBusiAccesslog(params);
                }
            }
        },
        beforeRouteLeave: (to, from, next) => {
            let scrollTop = document.querySelector(".main").scrollTop || 0;
            store.commit('setScrollY', scrollTop);
            next();
        }
    }
</script>

<style scoped lang="less">
    .swipeBox {
        height: 300px;
        .my-swipe .van-swipe-item {
            color: #fff;
            height: 300px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        /deep/.van-swipe__indicators {
            bottom: 78px;
        }
        /deep/.van-swipe__indicator--active {
            width: 16px;
            border-radius: 3px;
        }
    }
    .gridMenu {
        margin-top: -69px;
        padding: 0 12px;
        box-sizing: border-box;
        .van-grid {
            padding-top: 10px;
            box-shadow: 0px 3px 9px rgba(27, 93, 213, 0.1);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            z-index: 999;
            position: relative;
            /deep/.van-grid-item__content {
                padding: 8px;
            }
            /deep/.van-grid-item__text {
                color: #4d6181;
                text-align: center;
                min-height: 38px;
            }
        }
    }
    .notice {
        padding: 0 12px;
        height: 33px;
        box-sizing: border-box;
        margin-top: 20px;
        .con {
            background: #f6faff;
            border-radius: 32px;
            height: 33px;
            display: flex;
            padding: 4px 12px 4px 4px;
            align-items: center;
            box-sizing: border-box;
            .left {
                width: 84px;
                height: 25px;
                line-height: 19px;
                background: #477cf5;
                border-radius: 16px;
                text-align: center;
                font-size: 12px;
                padding: 3px 0;
                color: #fff;
                box-sizing: border-box;
                img {
                    width: 12px;
                    height: 12px;
                    vertical-align: middle;
                    margin-right: 8px;
                }
            }
            .right {
                flex: 1;
                .van-notice-bar {
                    color: #4d6181;
                    font-size: 12px;
                    height: 17px;
                    line-height: 17px;
                    padding: 0 8px;
                    /deep/.van-swipe__track {
                        height: 17px !important;
                    }
                    .van-swipe-item {
                        height: 17px !important;
                    }
                }
            }
        }
    }
    .title {
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        line-height: 24px;
        margin: 20px 0 8px 0;
        .left {
            font-size: 18px;
            color: #283f65;
            img {
                width: 24px;
                height: 24px;
                margin-right: 4px;
                vertical-align: top;
            }
        }
        .right {
            font-size: 12px;
            color: #9ba5b8;
        }
    }
    .problem {
        padding: 5px 10px;
        box-sizing: border-box;
        background: url("../../../../assets/images/bg.jpg") no-repeat;
        background-size: 100% 100%;
        background-position-y: 40px;
        overflow: hidden;
        min-height: 300px;
        ul {
            li {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #4d6181;
                border-bottom: 1px solid #e4e9f3;
                line-height: 49px;
                font-size: 13px;
                b {
                    margin-right: 8px;
                }
            }
            li:nth-last-of-type(1) {
                border-bottom: 0;
            }
        }
        // 列表空数据
        /deep/.custom-image .van-empty__image {
            width: 80px;
            height: 80px;
        }
    }
    .version {
        background: #f4f7fa;
        text-align: center;
        color: #aaa;
        font-size: 10px;
        line-height: 30px;
    }
</style>